<!DOCTYPE html>
<html>

<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>

<script>
    $(function () {
        var params = getParams();

        //点评的详情
        $("#comments-tab").click(function () {
            if (params.id) {
                var currentPage = 1;
                //总页数  用来判断是否是最后一页
                var pages;
                //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
                var travelData = [];
                //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
                var loading = false;//查询状态
                function query() {
                    //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                    if (loading) {
                        return;
                    }
                    $.get('/strategies/comments/' + params.id, {currentPage: currentPage}, function (data) {
                        //将查询出来的需要的数据的数组放到容器中
                        $.merge(travelData, data.list);
                        //render-loop="list"时 会找叫list的属性,所以需要将数据数组转为json对象的list属性
                        var json = {list: travelData};

                        $("#comments").renderValues(json, {
                            'getStar': function (item, value) {
                                //拼接所有评论的星级标签
                                var temp = "";
                                //对得到的starNum进行循环,拼出评论的星数
                                for (var i = 0; i < 5; i++) {
                                    //如果i小于当前查询出来星数,则应该是实心星星
                                    if (i < value) {
                                        temp += "<i class='fa fa-star'></i>";
                                    } else {//否则空心 星星
                                        temp += '<i class="fa fa-star-o"></i>';
                                    }
                                }
                                //将拼接的星星结果标签元素,拼接到指定位置
                                $(item).append(temp);
                            },
                            'strategyId': function (item, value) {
                                var url = $(item).data('url');
                                $(item).attr('href', url + value);
                            },
                            commentId: function (item, value) {
                                var url = $(item).data('url');
                                $(item).attr('href', url + value);
                            }
                        });

                        //当前页加1 下次将查询第二页数据
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //查询请求结果,则将查询状态改为 不在查询中
                        loading = false;

                        $(".comment-img img").click(function () {
                            var url = $(this).attr("src");
                            $(document).dialog({
                                titleShow: false,
                                overlayClose: true,
                                content: '<img src="' + url + '" width="100%"/>'
                            });
                        });
                    })
                }

                //默认的第一次查第一页数据
                query();
                //给window绑定滚动事件,当window滚动式,调用其中的函数
                $(window).scroll(function () {
                    //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                    if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                        //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                        if (currentPage <= pages) {
                            query();
                            //滚动到底部时,如果此时还有页数 弹出加载中信息
                            $(document).dialog({
                                type: 'notice',
                                infoText: '加载中',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        } else {
                            //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,已经到底了',
                                autoClose: 1500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });

            }
            //给私信按钮绑定点击事件
            $("#letterBtn").click(function () {
                //跳转到私信页面
                window.location.href = "/mine/chat2someone.html?receiverId=" + params.id;
            })

        })


        //取出当前登录的用户
        var user = JSON.parse(sessionStorage.getItem("user"));
        //取出当前登录用户和当前页面的用户是否存在关系
        $.get("/users/" + params.id + "/hasFollowed", function (data) {
            console.log(params.id);
            if (data) {
                console.log(data);
                $("#followBtn").html("取消关注")
            } else {
                $("#followBtn").html("关注")
            }
        });

        //粉丝和关注数量回显
        $.get("/users/" + params.id + "/fans", function (data) {
            console.log(data.length);
            //$("#follow").html(data.length);
            $("#fans").html(data.length);

        });
        $.get("/users/" + params.id + "/follow", function (data) {
            console.log(data.length);
            $("#follow").html(data.length);
            //window.location.reload();
            //$("#fans").html(data.length);
        });

        if (user && (user.id == params.id)) {
            console.log(user);
            //如果当前有登录用户,并且 当前登录的用户和当前页面上的用户都是一个人 不显示私信和关注按钮
            $("#functionBtn").html("");
        }


        if (params.id) {
            //查询fans
            $.get('/users/' + params.id + '/fans', function (data) {
                /*for(var i =0;i<data.length;i++){
                    data[i].name;
                }*/
                //渲染
                $("#fans").renderValues({list: data});
            });

            //显示评论条数
            $.get('/strategies/comments/' + params.id, {currentPage: 1}, function (data) {
                $("span[name='commentNum']").html(data.total);
            })


            //关注按钮绑定
            $("#followBtn").click(function () {
                if (user && (user.id == params.id)) {
                    console.log(user);
                    //如果当前有登录用户,并且 当前登录的用户和当前页面上的用户都是一个人 不显示私信和关注按钮
                    $("#functionBtn").html("");
                } else if (!user) {//如果当前没有登录
                    //给关注按钮增加一个显示关注
                    $("#followBtn").html("关注");
                    //模态框弹出到登录界面
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '请登陆后再执行相关操作!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html"
                        }
                    });
                }


                var onOff = $("#followBtn").html();//通过按钮上的字判断做关注和取消关注的功能
                console.log(onOff);
                if ("关注" == onOff) {
                    if (user && user.id != params.id) {//如果当前登录用户和要关注的用户不是一个人
                        console.log(user.id);
                        $.ajax({
                            url: "/users/" + params.id + "/follows",
                            method: "POST",
                            dataType: "json",
                            success: function () {
                                //点击取消关注后 取原粉丝数量值并减1 并且按钮显示关注
                                var temp = $("#fans").html();
                                $("#fans").html(parseInt(temp) + 1);
                                $("#followBtn").html("取消关注");
                            }
                        })
                    }
                } else {
                    $.ajax({
                        url: "/users/" + params.id + "/cancelFollow",
                        method: "DELETE",
                        dataType: "json",
                        success: function () {
                            //点击取消关注后 取原粉丝数量值并减1 并且按钮显示关注
                            var temp = $("#fans").html();
                            $("#fans").html(parseInt(temp) - 1);
                            $("#followBtn").html("关注");
                        }
                    })
                }
            });


            $.get("/users/" + params.id, function (data) {
                $(".info").renderValues(data);
                $(".bg").css("background-image", 'url(' + data.coverImgUrl + ')');
                var currentPage = 1;
                //总页数  用来判断是否是最后一页
                var pages;
                //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
                var travelData = [];
                //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
                var loading = false;//查询状态
                //获取我的游记数据
                function query() {
                    //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                    if (loading) {
                        return;
                    }
                    //每次在发送ajax前,将查询状态改为正在查询,
                    loading = true;
                    $.get("/users/" + data.id + "/travels", {currentPage: currentPage}, function (data) {
                        $("span[name='count']").html(data.total);
                        //将查询出来的需要的数据的数组放到容器中
                        $.merge(travelData, data.list);
                        //render-loop="list"时 会找叫list的属性,所以需要将数据数组转为json对象的list属性
                        var json = {list: travelData};
                        //渲染数据

                        console.log(json.list.length);
                        $("#travels").renderValues(json, {
                            //参数item  render-key 和render-fun所在的标签
                            //value 就是render-key获取的值
                            'getHref': function (item, value) {
                                var url = $(item).data('url');
                                console.log(value);
                                $(item).attr("href", url + value);
                            }
                        });
                        //当前页加1 下次将查询第二页数据
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //查询请求结果,则将查询状态改为 不在查询中
                        loading = false;
                    });
                }

                //默认的第一次查第一页数据
                query();
                //给window绑定滚动事件,当window滚动式,调用其中的函数
                $(window).scroll(function () {
                    //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                    if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                        //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                        if (currentPage <= pages) {
                            query();
                            //滚动到底部时,如果此时还有页数 弹出加载中信息
                            $(document).dialog({
                                type: 'notice',
                                infoText: '加载中',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        } else {
                            //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,已经到底了',
                                autoClose: 1500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
            });

        }
        //给私信按钮绑定点击事件
        $("#letterBtn").click(function () {
            //跳转到私信页面
            window.location.href = "/mine/chat2someone.html?receiverId=" + params.id;
        })
    });
</script>
<body>
<div class="container bg" style="background-image: url(/img/user/bg.jpeg);width: 100%">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName">
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div id="follow">
                        <span></span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div id="fans">
                        <span></span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col" id="functionBtn">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span name="count">0</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span name="commentNum">0</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl render-loop="list">
                <dd>
                    <a render-key="list.id" render-fun="getHref" data-url="/travelContent.html?id=">
                        <img render-src="list.coverUrl" width="100%">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 		<span render-html="list.doGoodNum"></span>
                                <i class="fa fa-thumbs-up"></i>
                            </span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>
        <div class="comment tab-pane fade " id="comments">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.author.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar">
                            <!--<i class="fa fa-star"></i><i class="fa fa-star"></i><i
                                class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>-->
                        </span>

                        <span class="comment-date" render-html="list.createTime">2018-07-11</span>
                        <div class="comment-content">
                            <a data-url="strategyComment.html?id=" render-key="list.id"
                               render-fun="commentId">
                                <p render-html="list.content">
                                    骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgArr">
                            <li>
                                <img render-src="list.imgArr.self">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a data-url="/strategyCatalogs.html?id=" render-key="list.strategy.id"
                               render-fun="strategyId">
                                <img render-src="list.strategy.coverUrl"> <span
                                    render-html="list.strategy.title">广州攻略</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>
<script>

</script>


</body>
</html>